<script>
import axios from "axios";
import foot from "@/components/foot.vue";
import myNav from "@/components/myNav.vue";
import {InfiniteScroll} from "element-ui";

export default {
  name: "MoreBook",
  directives: {
    "infinite-scroll": InfiniteScroll,
  },
  components: {myNav, foot},
  data() {
    return {
      loading: false,  //加载时的动画
      state: {
        books: [],
        page: 1,
        size: 10,
        total: 0
      }
    }
  }, methods: {
    //渲染列表
    getMoreBooks() {
      if (this.loading) {
        this.$api.book.getBooks(
            this.state.page,
            this.state.size,
            ''
        ).then((res) => {
          const data = res.data;
          if (data.success) {
            this.state.books = this.state.books.concat(data.content.records);
            this.state.total = data.content.total
          } else {
            this.$message.error('服务器返回失败');
          }
          this.loading = false;
        }).catch((resp) => {
          this.$message.error('服务器访问失败' + resp);
        });
      }
    },
    toDetail(id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      });
    },
    //下拉加载事件
    load() {
      console.log(66)
      //滑到底部时进行加载
      this.loading = true;
      setTimeout(() => {
        this.state.page++
        this.getMoreBooks()
        this.loading = false
      }, 1500);
    },
    toSy() {
      this.$router.push("/")
    }
  },
  filters: {
    myFilter(value) {
      return parseFloat(value).toFixed(2);
    }
  },//计算
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.state.total <= this.state.books.length;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  mounted() {
    this.loading = true
    this.getMoreBooks()
    this.loading = false
  }
}
</script>

<template>
  <div class="infinite-list more-ui" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
    <div style="width: 100vw;">
      <myNav></myNav>
      <p @click="toSy" style="cursor: pointer;margin: 20px 0 20px 400px">回到首页</p>
    </div>
    <div class="item">
      <div v-for="(item2,index) in state.books" @click="toDetail(item2.id)" class="infinite-list-item"
           style="margin-bottom: 40px">
        <img class="imgs" :src="item2.coverAddress" alt="">
        <p class="p1">{{ item2.name }}</p>
        <span class="p3">￥{{ item2.price }}</span>
        <span class="p4">￥{{ item2.price * 1.2 | myFilter }}</span>
      </div>
    </div>
    <div style="width: 100vw;"><!--//下拉加载时候加loading旋转动效-->
      <div v-if="loading" style="margin-top:10px;" class="loading">
        <span></span>
      </div>
      <div v-if="!noMore"  style="color:#adadad;width: 200px;margin: 0 auto">----滑动加载更多----</div>
      <!--//加载完成，提示语句-->
      <div v-if="noMore" style="margin:10px auto; text-align: center; font-size:18px;font-weight: 550; color:#000000">
        ----我是有底线的----
      </div>
      <foot></foot>
    </div>
  </div>
</template>

<style scoped>
body {
  overflow: hidden
}

.more-ui {
  height: 100vh;
  margin: 0 auto;
  padding: 0;
  overflow: auto;
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

li:first-child li:last-child {
  width: 100vw;
}

.infinite-list-item {
  padding: 10px 0;
  background-color: #ffffff;
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 220px;
}

.item {
  width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.item div:hover {
  transform: translate(0, -1px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.loading {
  text-align: center;
}

.loading span {
  display: inline-block;
  width: 35px;
  margin: 0 auto;
  height: 35px;
  border: 3px solid #409eff;
  border-left: transparent;
  animation: zhuan 0.5s linear infinite;
  border-radius: 50%;
}

@keyframes zhuan {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>